<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 64
})
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="security-icon"
  >
    <!-- 盾牌主体 -->
    <path
      d="M32 8C32 8 16 12 16 16C16 32 20 48 32 56C44 48 48 32 48 16C48 12 32 8 32 8Z"
      fill="url(#security-gradient-shield)"
    />
    <!-- 盾牌边缘高光 -->
    <path
      d="M32 10C32 10 18 13.5 18 16.5C18 31 21.5 45.5 32 53C42.5 45.5 46 31 46 16.5C46 13.5 32 10 32 10Z"
      stroke="white"
      stroke-width="1"
      fill="none"
      opacity="0.3"
    />
    <!-- 锁孔装饰 -->
    <circle
      cx="32"
      cy="26"
      r="6"
      fill="white"
      opacity="0.9"
    />
    <circle
      cx="32"
      cy="26"
      r="4"
      fill="url(#security-gradient-lock)"
    />
    <!-- 锁孔 -->
    <rect
      x="30"
      y="28"
      width="4"
      height="8"
      rx="2"
      fill="white"
      opacity="0.9"
    />
    <path
      d="M30 32L32 36L34 32H30Z"
      fill="white"
      opacity="0.9"
    />
    <!-- 安全标记线条1 -->
    <path
      d="M22 20C24 18 28 17 32 17"
      stroke="#FFD700"
      stroke-width="2"
      stroke-linecap="round"
      opacity="0.7"
    />
    <!-- 安全标记线条2 -->
    <path
      d="M42 20C40 18 36 17 32 17"
      stroke="#FFD700"
      stroke-width="2"
      stroke-linecap="round"
      opacity="0.7"
    />

    <!-- 渐变定义 -->
    <defs>
      <linearGradient id="security-gradient-shield" x1="32" y1="8" x2="32" y2="56" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#4facfe" />
        <stop offset="50%" stop-color="#00f2fe" />
        <stop offset="100%" stop-color="#7ee8fa" />
      </linearGradient>
      <linearGradient id="security-gradient-lock" x1="32" y1="22" x2="32" y2="30" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#FFD700" />
        <stop offset="100%" stop-color="#FFA500" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.security-icon {
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
  transition: transform 0.3s ease;
}

.security-icon:hover {
  transform: scale(1.05);
}
</style>
